<template>
  <view class="mineMain">
    <view class="headerBox">
      <view class="headerLeft">
        <view>
          <image :src="headerImg" mode="widthFix"></image>
        </view>
        <text>张同学</text>
      </view>
      <u-icon name="arrow-right" color="#fff" size="32"></u-icon>
    </view>
    <view class="tabBox">
      <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
    </view>
    <view class="listMain" v-if="current === 0">
    <!--<view class="emptyBox">-->
    <!--   <u-empty text="暂无数据"></u-empty>-->
    <!--</view>-->
      <view class="listItem" v-for="(item,index) in 2" :key="index">
        <text class="h3">2025年智能变电站值班员专项培训班(一期)</text>
        <text class="p">时间：2025年01月01日-2025年01月01日</text>
        <text class="p">地点：内蒙古呼和浩特市新城区</text>
        <view class="btnBox">
          <text>取消报名</text>
          <text @click="viewDetail('ybm')">查看详情</text>
        </view>
      </view>
    </view>
    <view class="listMain" v-if="current === 1">
      <view class="listItem" v-for="(item,index) in 1" :key="index">
        <text class="h3">2025年智能变电站值班员专项培训班(一期)</text>
        <text class="p">时间：2025年01月01日-2025年01月01日</text>
        <text class="p">地点：内蒙古呼和浩特市新城区</text>
        <view class="btnBox">
          <text style="width: 100%; border-right: none;" @click="viewDetail('ycj')">查看详情</text>
        </view>
      </view>
    </view>
    <u-back-top :scroll-top="scrollTop"></u-back-top>
    <u-top-tips ref="uTips"></u-top-tips>
    <toast></toast>
  </view>
</template>
<script>
export default {
  data() {
    return {
      headerImg: '/static/images/headerImg.jpg',
      scrollTop: 0,
      keyword: '',
      list: [{
        name: '已报名',
        count: 2
      }, {
        name: '已参加',
        count: 1
      }],
      current: 0
    }
  },
  onLoad() {},
  onShow() {},
  onPullDownRefresh() {},
  onShareAppMessage() {},
  methods: {
    /* 顶部提示文字 */
    uTips(title, type = 'warning', duration = 1500) {
      this.$refs.uTips.show({
        title: title,
        type: type,
        duration: duration,
      })
    },
    /* 返回顶部 */
    onPageScroll(e) {
      this.scrollTop = e.scrollTop
    },
    // tab切换
    change(index) {
      this.current = index;
    },
    // 查看详情
    viewDetail(type) {
      if(type === 'ybm') {
        this.$u.route({
          url: '/pages/detail/index',
          params: {
            type: 'ybm'
          }
        })
      } else if(type === 'ycj') {
        this.$u.route({
          url: '/pages/detail/ycj',
        })
      }
    }
  },
}
</script>
<style lang="scss" scoped>
page {
  background: #fff;
  padding-bottom: 120rpx;
}
.mineMain{
}
.tabBox{
  border-bottom: 1rpx solid #f1f1f1;
  padding: 15rpx;
  background: #fff;
}
.listMain{
  height: 100%;
  padding: 30rpx;
  box-sizing: border-box;
}
.emptyBox{
  padding: 20vh 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.headerBox{
  background-image: linear-gradient(to bottom, #4683d4, #fff);
  padding: 60rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .headerLeft{
    display: flex;
    align-items: center;
    >view{
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      overflow: hidden;
      border: 4rpx solid #fff;
      image{
        width: 100%;
        height: 100%;
      }
    }
    >text{
      margin-left: 20rpx;
      font-size: 36rpx;
      font-weight: bold;
      color: #fff;
    }
  }
}
.listItem{
  padding: 30rpx 20rpx 0;
  background: #fff;
  box-shadow: 0 0 10px #e5e5e5;
  margin-bottom: 30rpx;
  border-radius: 16rpx;
  >text{
    display: block;
    &.h3{
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }
    &.p{
      font-size: 28rpx;
      color: #666;
    }
  }
  .btnBox{
    overflow: hidden;
    border-top: 1rpx solid #f1f1f1;
    margin-top: 15rpx;
    text{
      display: block;
      width: 50%;
      float: left;
      line-height: 80rpx;
      border-right: 1px solid #f1f1f1;
      box-sizing: border-box;
      text-align: center;
      &:nth-of-type(2) {
        border-right: none;
      }
    }
  }
}
</style>
